<template>
	<view class="movie-score-wapper">
		<!-- 可以循环整数的 5 就是相当于 1-5的数组整合 黄色和灰色都是通过动态展示-->
		<image v-for="item in yelloScore" src="../static/icos/star-yellow.png" class="star-ico"></image>

		<image v-for="gray in grayScore" src="../static/icos/star-gray.png" class="star-ico"></image>
		<!-- 决定是否显示分支的判断 -->
		<view class="movie-score" v-if="showNum == 1">
			{{innerScore}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "trailerStars",
		data() {
			return {
				yelloScore: 0, //默认是0分 不传递
				grayScore: 5 //5个灰色的星星 0分的时候 
			};
		},
		props: { //一个是分数 一个是决定分数值是否显示
			innerScore: 0, // 定义外部传入的分数 根据分数计算出 需要的星星数字
			showNum: 0 // 是否需要显示具体的分数  1：显示  0：不显示
		},
		// 组件内的vue 生命周期 
		created() {
			this.getstart()
		},
		methods: {
			//计算星星数 需要多少  黄色的思路是 根据传递的评分 / 2  2的由来是 最高 10分 有5个星 10/5  先判断是否正常的传递之后再计算 灰色的星就是 5 - 黄色的
			getstart() {
				var tempScore = 0;
				//先进性判断
				if (this.innerScore != null && this.innerScore != undefined && this.innerScore != '') {
					tempScore = this.innerScore;
				}
				var yelloScore = parseInt(tempScore / 2); //parseint 取整数 去掉小数点
				var grayScore = 5 - yelloScore;

				this.yelloScore = yelloScore;
				this.grayScore = grayScore;
			}
		}
	}
</script>

<style>
	.movie-score-wapper {
		display: flex;
		flex-direction: row;
	}

	.star-ico {
		width: 20upx;
		height: 20upx;
		margin-top: 6upx;
	}

	.movie-score {
		font-size: 12px;
		color: grey;
		margin-left: 8upx;
	}
</style>
